<template>
  <div class="shop_container">
    <ul class="shop_list" v-if="shopArr.length">
      <li class="shop_li border-1px" 
       v-for="(shops, index) in shopArr" :key="index"
        :ref='index'
        @click="goDetail">
        <a>
          <div class="shop_left">
            <!-- <img class="shop_img" :src="baseImgUrl+shops.image_path"> -->
            <img class="shop_img" src="./images/nav/2.jpg">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">{{shops.name}}</h4>
              <ul class="shop_detail_ul">
                <li class="supports" v-for="(support, index) in shops.supports" :key="index">
                  {{support.icon_name}}
                </li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <Star :score="shops.rating" :size="24"/>
                <div class="rating_section">
                  {{shops.rating}}
                </div>
                <div class="order_section">
                  月售{{shops.recent_order_num}}单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">{{shops.delivery_mode.text}}</span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥{{shops.float_minimum_order_amount}}起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥{{shops.float_delivery_fee}}</span>
              </p>
            </section>
          </div>
        </a>
      </li>
    </ul>
    <!-- 占位符 -->
    <ul class="shop_list" v-else>
      <li v-for="(item, index) in 5" :key="index">
        <img src="./images/shop_back.svg" alt="">
      </li>
    </ul>
  </div>
</template>


<script>
import Star from '../Star/Star'
export default {
  props:{
    shopArr:Array,
    score:String
  },
  data () {
    return {
      // baseImgUrl: 'http://cangdu.org:8001/img/'
      baseImgUrl: "./images/shop/"+Math.floor(Math.random()*4)+'.jpg',
      testStyle:''
    }
  },
  mounted: function () {
  this.$nextTick( async function () {
    
    })
  },
  methods: {
    goDetail(){
      this.$router.push('/detail')
    },
    touchStart(id) {
    event.stopPropagation()
    event.preventDefault()
    if (event.touches.length === 1) {
      this.startX = event.touches[0].clientX
    }
  },
  touchEnd(id) {
    event.stopPropagation()
    event.preventDefault()
    const dom = this.$refs[id][0]
    const wd = dom.offsetWidth
    if (event.changedTouches.length === 1) {
      this.endX = event.changedTouches[0].clientX
      this.disX = this.endX - this.startX
    }
    if (this.disX > 0) {
      dom.style = 'transform: translateX(0);'
    } else {
      dom.style = `transform: translateX(-100px)`
    }
  }
  },
  components:{
    Star
  }
}
</script>


<style lang="stylus" rel="stylesheet/stylus">
 @import "../../common/stylus/mixins.styl"
 .shop_container
      margin-bottom 50px
      .shop_list
        .shop_li
          bottom-border-1px(#f1f1f1)
          width 100%
          >a
            clearFix()
            display block
            box-sizing border-box
            padding 15px 8px
            width 100%
            .shop_left
              float left
              box-sizing border-box
              width 23%
              height 75px
              padding-right 10px
              .shop_img
                display block
                width 100%
                height 100%
            .shop_right
              float right
              width 77%
              .shop_detail_header
                clearFix()
                width 100%
                .shop_title
                  float left
                  width 200px
                  color #333
                  font-size 16px
                  line-height 16px
                  font-weight 700
                  &::before
                    content '品牌'
                    display inline-block
                    font-size 11px
                    line-height 11px
                    color #333
                    background-color #ffd930
                    padding 2px 2px
                    border-radius 2px
                    margin-right 5px
                .shop_detail_ul
                  float right
                  margin-top 3px
                  .supports
                    float left
                    font-size 10px
                    color #999
                    border 1px solid #f1f1f1
                    padding 0 2px
                    border-radius 2px
              .shop_rating_order
                clearFix()
                width 100%
                margin-top 18px
                margin-bottom 8px
                .shop_rating_order_left
                  float left
                  color #ff9a0d
                  .star //2x图 3x图
                    float left
                    font-size 0
                    .star-item
                      display inline-block
                      background-repeat no-repeat
                    &.star-48
                      .star-item
                        width 20px
                        height 20px
                        margin-right 22px
                        background-size 20px 20px
                        &:last-child
                          margin-right: 0
                        &.on
                          bg-image('./images/stars/star48_on')
                        &.half
                          bg-image('./images/stars/star48_half')
                        &.off
                          bg-image('./images/stars/star48_off')
                    &.star-36
                      .star-item
                        width 15px
                        height 15px
                        margin-right 6px
                        background-size 15px 15px
                        &:last-child
                          margin-right 0
                        &.on
                          bg-image('./images/stars/star36_on')
                        &.half
                          bg-image('./images/stars/star36_half')
                        &.off
                          bg-image('./images/stars/star36_off')
                    &.star-24
                      .star-item
                        width 10px
                        height 10px
                        margin-right 3px
                        background-size 10px 10px
                        &:last-child
                          margin-right 0
                        &.on
                          bg-image('./images/stars/star24_on')
                        &.half
                          bg-image('./images/stars/star24_half')
                        &.off
                          bg-image('./images/stars/star24_off')
                  .rating_section
                    float left
                    font-size 10px
                    color #ff6000
                    margin-left 4px
                  .order_section
                    float left
                    font-size 10px
                    color #666
                    transform scale(.8)
                .shop_rating_order_right
                  float right
                  font-size 0
                  .delivery_style
                    transform-origin 35px 0
                    transform scale(.7)
                    display inline-block
                    font-size 12px
                    padding 1px
                    border-radius 2px
                  .delivery_left
                    color #fff
                    margin-right -10px
                    background-color #02a774
                    border 1px solid #02a774
                  .delivery_right
                    color #02a774
                    border 1px solid #02a774
              .shop_distance
                clearFix()
                width 100%
                font-size 12px
                .shop_delivery_msg
                  float left
                  transform-origin 0
                  transform scale(.9)
                  color #666
                .segmentation
                  color #ccc
</style>
